<template>
  <div class="scale-box">
    <!-- <VScaleScreen width="1920" height="1080" fullScreen> -->
    <VScaleScreen width="1920" height="1080">
      <!-- 地图容器 -->
      <div id="map-container"></div>
      <div class="left-box">
        <el-select :fit-input-width="true" placeholder="请选择城市">
          <el-option label="北京市" value="beijing"></el-option>
          <el-option label="上海市" value="shanghai"></el-option>
          <el-option label="广州市" value="guangzhou"></el-option>
        </el-select>
      </div>
      <div class="right-box" ref="chartDom"></div>
    </VScaleScreen>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import VScaleScreen from "v-scale-screen";
import { debounce } from "@/utils/debounce";
import * as echarts from "echarts";
import AMapLoader from "@amap/amap-jsapi-loader";

window._AMapSecurityConfig = {
  securityJsCode: "3dc2c7ce241e58109ee5c7128f943052", // 高德地图安全密钥
};
const chartDom = ref(null); // 图表dom
let chartResize = null; // 图表自适应函数
let map = null; // 保存地图实例
let infoWindow = null; // 保存弹窗实例
onMounted(() => {
  AMapLoader.load({
    key: "e5a485f5ed9cfe6ab78394fe306c3b74", // 高德地图的API key
    version: "2.0",
    plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 加载自动补全和地点搜索插件
  })
    .then(AMap => {
      // 创建地图实例
      map = new AMap.Map("map-container", {
        zoom: 16,
        zooms: [5, 20], // 设置地图的缩放级别范围
        center: [116.397428, 39.90923], // 设置地图的中心点
        resizeEnable: true,
        mapStyle: "amap://styles/grey", //设置地图的显示样式
        viewMode: "2D", //设置地图模式
      });
      // 创建信息窗口
      infoWindow = new AMap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: "",
        offset: new AMap.Pixel(0, 0), // 弹窗偏移量
        anchor: "top-left", // 弹窗锚点
        closeWhenClickMap: true, // 点击地图关闭弹窗
      });

      // 自定义图片标记
      const marker = new AMap.Marker({
        position: new AMap.LngLat(116.397457, 39.909188), // 标记位置
        icon: new AMap.Icon({
          image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 自定义图片
          size: new AMap.Size(19, 31),
        }),
        offset: new AMap.Pixel(-8.5, -31), // 设置偏移量
        // draggable: true, // 启用拖动
      });

      marker.on("click", e => {
        infoWindow.setContent("<div class='popup-box'>这里是弹窗内容2！</div>");
        infoWindow.open(map, e.target.getPosition());
      });

      marker.setMap(map); // 将标记添加到地图上
    })
    .catch(error => {
      console.error("加载高德地图或插件失败:", error);
    });
  /* ----------  设置图表  ---------- */
  const myChart = echarts.init(chartDom.value);
  const option = {
    color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
    title: {
      text: "Gradient Stacked Area Chart",
      textStyle: {
        color: "#fff",
        fontSize: 16,
      }, // 设置字体颜色
      left: "center", // 或 'left', 'right', 'top', 'bottom'
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"],
      textStyle: {
        color: "#fff",
      }, // 设置字体颜色
      top: "5%", // 可以调整距离顶部的距离
    },
    toolbox: {
      // feature: {
      //   saveAsImage: {},
      // },
    },
    grid: {
      top: "15%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisLabel: {
          color: "#fff", // 设置x轴字体颜色
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        itemStyle: {
          color: "#fff",
        }, // 设置字体颜色
        axisLabel: {
          color: "#fff", // 设置Y轴字体颜色
        },
      },
    ],
    series: [
      {
        name: "Line 1",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(128, 255, 165)",
            },
            {
              offset: 1,
              color: "rgb(1, 191, 236)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [140, 232, 101, 264, 90, 340, 250],
      },
      {
        name: "Line 2",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(0, 221, 255)",
            },
            {
              offset: 1,
              color: "rgb(77, 119, 255)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [120, 282, 111, 234, 220, 340, 310],
      },
      {
        name: "Line 3",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(55, 162, 255)",
            },
            {
              offset: 1,
              color: "rgb(116, 21, 219)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [320, 132, 201, 334, 190, 130, 220],
      },
      {
        name: "Line 4",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 0, 135)",
            },
            {
              offset: 1,
              color: "rgb(135, 0, 157)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [220, 402, 231, 134, 190, 230, 120],
      },
      {
        name: "Line 5",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        label: {
          show: true,
          position: "top",
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 191, 0)",
            },
            {
              offset: 1,
              color: "rgb(224, 62, 76)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [220, 302, 181, 234, 210, 290, 150],
      },
    ],
  };
  myChart.setOption(option, null, { renderer: "svg" });
  chartResize = debounce(myChart.resize, 500);
  window.addEventListener("resize", chartResize);
});
onUnmounted(() => {
  window.removeEventListener("resize", chartResize);
});
</script>

<style lang="scss" scoped>
.scale-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#map-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.left-box {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 300px;
  // height: 200px;
  z-index: 999;
}

.right-box {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 600px;
  height: 400px;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
}

:deep(.popup-box) {
  // width: 200px;
  // height: 100px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}
</style>
